<div class="steps">
 
	<div class="steps-items">
		<div *ngFor="let item of processNodes" #{{item.value}} class="steps-item" [ngClass]="(item.documentData.length<=0&&item.evidenceData.length<=0)?'primary':'success'" (click)="move(item.value)">
				<div class="item-container">
					<div class="item">
						<span class="item-text" [innerHtml]='item.processName'  ></span>
					</div>
				</div>
				<div class="item-line-bar"></div>
		</div>
  </div>
  <!-- 案件详情内容 --> 
	<div class="steps-content"  [ngClass]="caseReview.showWindow?'margin260':''">
    <!-- 新建上传文书 -->
    <app-docfile    
       [type]='type' 
       [id]='paramId'
       [bizfileListOther]='bizfileListOther'  
       [evidenceList]='evidenceList'   
       (goRefinsh)='onRefinsh($event)'
    ></app-docfile>
  
    <div class="steps-Introduction"> 
				<div class="card"> 
						<div class="card-body"> 
								<div class="instrument-title">
										<h4>基本信息</h4>
										<a class="" href="javascript: void(0)" (click)="toggle()">{{isOpen?'收起':'展开'}}</a>
								</div>
								<hr/>
								<p class="instrument-title-header">
										<span>线索登记时间：{{insertDate}}</span>
										<span>登记人：{{registUerName}}</span>
										<span>办案人员：</span>
										<span *ngFor="let item of caseUserName">{{item}}</span>
                </p>
                
								<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container ">
                    <p>案件描述：{{registerContent}}</p>
                  <div class='currentPersonInfo'>
                    <h4>当事人信息</h4>
                    <p class='partyName'>名称（姓名）：{{cmsCaseInfo.partyName}}</p>
                    <p class='partyAddress'>地址（住址）：{{cmsCaseInfo.addressDetail}}</p>
                    <p class='partyPhone'>联系电话：{{cmsCaseInfo.partyPhone}}</p>
                    <p class='partyOtherPhone'>其他联系方式：{{cmsCaseInfo.partyOtherPhone}}</p>
                  </div>
                </div>
						</div>
				</div>
		</div>
		<div *ngFor="let stepItem of processNodes" class="card" [ngClass]="stepItem.value" [hidden]="!(stepItem.documentData.length > 0 || stepItem.evidenceData.length > 0)">
			<div class="card-body">
				<h4>{{stepItem.name}}</h4>
				<table>
					<thead>
						<tr>
							<th style="width:50px;">序号</th>
							<th class="text-left" style="width:75%;">名称</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr *ngFor="let item of stepItem.documentData; let i=index">
							<td style="width:50px;">{{i+1}}</td>
							<td class="text-left hover-card-container" appHide   [doctype]="item.doctype"  [docid]="item.docid"  (getdocs)="getApproveFlow(item.docid)">
              <ng-container *ngIf="item.doctype !== '其他'">
                <a href="javascript: void(0)" (click)="view(item.docid, item.doctype,item)">  
                  <ng-container *ngIf="item.doctype == '其他'">
                      <div class="img-icon instrument" [ngClass]="item.filename|fileType"></div>
                  </ng-container>
                  <span class='filename'>{{item.filename}}</span> 
                  <div class="badge" [ngClass]="badge(item.approveStatus)">{{item.approveStatus}}</div>
                </a>
              </ng-container>
              <ng-container *ngIf="item.doctype == '其他'">
                  <a href="javascript: void(0)" (click)="showModal(item.mediatype,item.fileid,'bizfile')">  
                    <div class="img-icon instrument" [ngClass]="item.filename|fileType"></div>
                    <span class='filename'>{{item.filename}}</span> 
                    <div class="badge" [ngClass]="badge(item.approveStatus)">{{item.approveStatus}}</div>
                  </a>
              </ng-container>

                <ng-container  *ngIf="item.relatedBizFile" >
                  <div class='Relation'>
                      <span > 关联 </span>{{item.relatedBizFile.filename}}
                  </div>
                   </ng-container>
								<!-- <button nz-button nzType="default" class="hover-card-reload-btn" nzShape="circle" (click)="approveReload(item.docid)">
									<i nz-icon nzType="reload"></i>  
								</button>   -->
								<div class="card hover-card">
									<ng-container *ngIf="approveFlow && approveFlow.length > 0; else elseTemplate">
										<div class="hover-card-steps">
											<div class="hover-card-steps-item" *ngFor="let approveItem of approveFlow">
												<div class="hover-card-steps-icon" [ngClass]="approveItem.hasApproved=='1'?'success':'primary'"></div>
												<div class="hover-card-steps-text">
													<p><span>{{approveItem.approvalLink}}</span> - <span>{{approveItem.approveStatus||'—— ——'}}</span></p>
													<p><span>提交人</span>：<span>{{approveItem.approver||'—— ——'}}</span></p>
													<p><span>{{approveItem.approveDate||'—— ——'}}</span></p>
												</div>
                      </div>
										</div>
										</ng-container>
										<ng-template #elseTemplate>
											<div style="margin:0 auto;position: relative;height:100%;">
												<img style="position: absolute;width: 100px;height: 87px; top: 50%;left: 50%;transform:translate(-50%,-50%);" src=''>
												<p style="
													transform:translate(-50%,-50%);
													position: absolute; 
													font-size:14px;
													width:180px;
													height:14px; 
													text-align: center;
													margin-top:45px;
													top:50%;
													left: 50%;" class="ant-empty-description"> 
													暂无数据 
											</p>
											</div>
										</ng-template>
                </div>
                
							</td>
							<td class="text-left">
               
                <ng-container *ngIf="item.doctype!=='其他'&&type!=='approval'&&item.docSource!=='三方系统';else lookblock">
                    <ng-container *ngIf="(!item.approve)">
                        <ng-container *ngIf="item.doctype!='案件来源登记表';else elseBlock"> 
                           <a  class="text-btn" href="javascript:void(0)" (click)="handleEdit(item.docid,item.doctype)">编辑</a> 
                        </ng-container>
                        <ng-template #elseBlock>
                            <ng-container *ngIf="item.doctype=='案件来源登记表' && !clueId">
                                <a class="text-btn"  href="javascript:void(0)" (click)="handleEdit(item.docid,item.doctype)">编辑</a> 
                            </ng-container>  
                        </ng-template>
                      </ng-container> 
                </ng-container>
                <ng-template #lookblock>
                    <a class='text-btn' href="javascript:void(0)" *ngIf="item.doctype !='其他' &&item.docSource !='三方系统'" (click)="view(item.docid, item.doctype,item)">查看</a>
                    <span *ngIf="item.doctype =='其他' && item.docSource !== '三方系统'">
                      <a class='text-btn' href="javascript:void(0)" *ngIf="(item.mediatype !=null) && (((item.mediatype).indexOf('video') == 0)||((item.mediatype).indexOf('audio') == 0)||((item.mediatype).indexOf('image') == 0))"  (click)="showModal(item.mediatype,item.fileid,'bizfile')">查看</a>
                    </span> 
                 </ng-template>
                <!-- <a class='text-btn' href="/download/bizfile/{{item.fileid}}" [download]="item.filename">下载</a> -->
                <a class='text-btn a_download'  (click)='download(item.fileid,item.filename,"bizfile")'>下载</a>
                <ng-container *ngIf="item.doctype!='案件来源登记表'"> 
                    <a class="text-btn" *ngIf="(!item.approve) " href='javascript:void(0)' (click)="deleteBizfile(item.fileid,item.docSource,item.doctype,item.docid)">删除</a>
                </ng-container>
							</td>
						</tr>
					</tbody>
				</table>
				<table style="margin-top: 10px;">
					<tr *ngFor="let item of stepItem.evidenceData; let i=index">
						<td style="width:50px;">{{i+1}}</td>
						<td style="width:75%;" class="text-left hover-card-container">
							<a href="javascript: void(0)">
								<div class="img-icon instrument"></div>
								<span>
                  <!-- <a href="/evidenceApi/evidence/file/{{item.fileId}}">{{item.fileName}}</a> -->
                  <a class='a_download'  (click)='download(item.fileId,item.fileName,"evidence")'>{{item.fileName}}</a>
                 </span>
							</a>
						</td>
						<td class="text-left">
							<a class='text-btn' href="javascript:void(0)" *ngIf="((item.contentType).indexOf('video') == 0)||((item.contentType).indexOf('audio') == 0)||((item.contentType).indexOf('image') == 0)" (click)="showModal(item.contentType,item.fileId,'evidence')">查看</a>
              <a class='text-btn a_download'  (click)='download(item.fileId,item.fileName,"evidence")'>下载</a>
              <a class='text-btn' href="javascript:void(0)" (click)="deleteEvidence(item.id,item.evidenceState)">删除</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
  </div> 
  <!-- 终端对接 --> 
  <div  class='steps-right-normal'  [ngClass]="caseReview.showWindow?'steps-right-fixed':'steps-right'" >
      <div class='steps-terminal'>  
        <h6 class='steps-head'>现场证据回传</h6>
        <div class='steps-matter'  *ngIf="taskFiles.length>0; else emptyTask;">
            <nz-collapse [nzBordered]="false"  [nzAccordion]='true'>
                <nz-collapse-panel 
                  #p
                  *ngFor="let task of taskFiles;let  firstTask = first;let lastTask = last;"
                  [nzHeader]="header"
                  [nzActive]="task.active"
                  [ngStyle]="{'border-radius': '4px'}"
                  [nzExpandedIcon]="expandedIcon"
                >
                  <ng-template #header >
                    <div >
                        <p class='steps-matter-date'>{{task.uploadTime}}</p> 
                        <p class='steps-matter-text'>办理事项：{{task.handleMatter||'无'}}</p> 
                    </div>
                  </ng-template>
                  
                  <div class='livedescribe'  *ngFor="let remark of task.remarkList">
                      <div class='describe'>
                          现场情况描述
                      </div>
                      <div class='problem'   (click)="copy(description)"   *ngFor="let description of remark.descriptions">
                       {{description}}
                      </div>
                      <div class='evidence'>
                        <nz-checkbox-wrapper style="width: 100%; border-bottom:1px solid rgba(212,218,228,1);"   (nzOnChange)="changeLog($event)"  *ngIf="remark.attachmentList.length>0;" >
                            <div *ngFor="let attachment of remark.attachmentList;let  firstChild = first"  class='file-checkbox  checkbox-div'  [ngClass]="attachment.checked?'checked-blue':''"  >
                              <label nz-checkbox [nzValue]="attachment.fileId"  [(ngModel)]="attachment.checked"    class='checked-normal' [ngClass]="attachment.checked?'checked-blue':''" ></label> 
                              <span placement="bottom" ngbTooltip="{{attachment.fileName}}"  class='steps-file-fileName' [ngClass]="attachment.checked?'checked-blue':''"  (click)='attachment.checked = !attachment.checked'> {{attachment.fileName}}</span> 
                              <span class='checkbox-rename' *ngIf="attachment.mediaType!='application/pdf'"  (click)='showModal(attachment.mediaType,attachment.fileId,"task",attachment)'> 预览</span>
                           </div> 
                      </nz-checkbox-wrapper>
                      </div>
                  </div>
                  <div class='bizFile'>
                      <div class='describe'>
                          文书列表
                      </div>
                      <div class='docByFile' >
                          <nz-checkbox-wrapper style="width: 100%; border-bottom:1px solid rgba(212,218,228,1);"  (nzOnChange)="changeLog($event)" *ngIf="task.files.length>0;"  >
                              <div *ngFor="let file of task.files;let  firstChild = first"  class='file-checkbox  checkbox-div'  [ngClass]="file.checked?'checked-blue':''"  >
                                <label nz-checkbox [nzValue]="file.fileId"  [(ngModel)]="file.checked"    class='checked-normal' [ngClass]="file.checked?'checked-blue':''" ></label> 
                                <span placement="bottom" ngbTooltip="{{file.fileName}}"  class='steps-file-fileName' [ngClass]="file.checked?'checked-blue':''"  (click)='file.checked = !file.checked'> {{file.fileName}}</span> 
                             </div> 
                        </nz-checkbox-wrapper>
                      </div>
                  </div>  

                  <ng-template #expandedIcon let-active>
                        <i style="position: absolute; right: 28px;text-align: right;" nz-icon nzType="caret-right" class="ant-collapse-arrow" [nzRotate]="p.nzActive ? 90 : -90"></i>
                  </ng-template>
                </nz-collapse-panel>
              </nz-collapse>
        </div>

        <ng-template #emptyTask>
            <div style="margin:0 auto;position: relative;height:150px;margin-top: 20px;background: #fff;box-shadow: 0px 2px 8px 0px #d4dae4;">
              <img style="position: absolute;width: 100px;height: 87px; top: 50%;left: 50%;transform:translate(-50%,-50%);" src=''>
              <p style="
                transform:translate(-50%,-50%);
                position: absolute; 
                font-size:14px;
                width:180px;
                height:14px; 
                text-align: center;
                margin-top:45px;
                top:50%;
                left: 50%;" class="ant-empty-description"> 
                暂无终端回传数据 
            </p>
            </div>
        </ng-template>
          <div class='steps-terminal-foot'>
            <nz-select class='select' style="width: 120px;vertical-align: middle;margin-right:10px;"  nzPlaceHolder='选择办案环节' [(ngModel)]='segment'  [nzSuffixIcon]='icon'   [nzSuffixIcon]='icon' nzAllowClear='false'>
                <nz-option nzValue="线索" nzLabel="线索" >线索</nz-option>
                <nz-option nzValue="立案" nzLabel="立案" >立案</nz-option>
                <nz-option nzValue="调查取证" nzLabel="调查取证" >调查取证</nz-option> 
                <nz-option nzValue="处罚决定" nzLabel="处罚决定" >处罚决定</nz-option>
                <nz-option nzValue="执行与结案" nzLabel="执行与结案" >执行与结案</nz-option>
                <nz-option nzValue="强制执行" nzLabel="强制执行" >强制执行</nz-option> 
            </nz-select>
            <button class='steps-terminal-submit'  [ngClass]="{'disabled':!segment}"  (click)="updateTaskFileStatus()">上传</button>
          </div>
      </div>  
    </div>  

	<nz-modal [(nzVisible)]="isVisible"    [nzStyle]="{'min-height':'300px'}"  nzMaskClosable="false" nzWidth="900"  [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
			<ng-template #modalTitle>
          <ng-container *ngIf="renameIsShow;else rename">
              <!-- <span *ngIf="publictypeFlag.includes('pdf')">pdf预览</span> -->
              <span *ngIf="publictypeFlag.includes('video')">视频预览</span>
              <span *ngIf="publictypeFlag.includes('audio')">音频预览</span>
              <span *ngIf="publictypeFlag.includes('image')">图片预览</span>
          </ng-container>
          <ng-template #rename>
              <span>证据详情</span>
          </ng-template>
			</ng-template>
			<ng-template #modalContent>
          <div *ngIf="renameIsShow" class='renameBox'>
              <span class='renameSpan'  [ngClass]="{'hidden': renameSpan}">{{renameFile.fileName}}</span>
              <input #input  class='renameInput'  type='hidden' (blur)='renameOnBlur(input)'/>
              <span style="display: inline-block;margin-left:20px;" *ngIf="!renameSpan">
                <button nz-button nzType="primary" nzSize='small' style="margin-left:20px" (click)='rename(input)' >重命名</button> 
              </span>
              <span style="display: inline-block;margin-left:20px;" *ngIf="renameSpan">
                  <button nz-button nzType="primary" nzSize='small' style="margin-left:20px" (click)='renameOk(input)' >确认</button> 
              </span>
          </div>
          <!-- 文件类型为pdf -->
          <!-- <div *ngIf="publictypeFlag.includes('pdf')" >
            <pdf-viewer [src]="url" 
            [render-text]="true"
            (after-load-complete)='afterLoadPdf($event)'
            style="display: block;" 
            ></pdf-viewer>
          </div> -->
        
					<!-- 文件类型为视频 -->
					<div *ngIf="publictypeFlag.includes('video')">
              <ng-container *ngIf='!typeFlag'>
                    <nz-spin nzSimple style='margin-top:10px'></nz-spin>
              </ng-container>
              <ng-container *ngIf='typeFlag'>
               <vg-player (onPlayerReady)="onPlayerReady($event)">
                  <video 
                  id="my-video"  #video [vgMedia]="video"  style="width:100%;height:auto;"  class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"    data-setup="{}" autoplay>
                    <source [src]="url" />
                    <p class="vjs-no-js">播放视频需要启用JavaScript，推荐使用支持HTML5的浏览器访问。
                        To view this video please enable JavaScript, 
                        and consider upgrading to a web browser that
                    <a href="http://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video</a>
                    </p>
                </video>
               </vg-player>
              </ng-container>

          </div>
          <!-- 音屏 -->
					<div *ngIf="publictypeFlag.includes('audio')">
              <ng-container *ngIf='!typeFlag'>
                  <nz-spin nzSimple style='margin-top:10px'></nz-spin>
             </ng-container>
             <ng-container *ngIf='typeFlag'>
              <vg-player style="height: 50px;" (onPlayerReady)="onPlayerReady($event)">
                  <vg-controls  vgFor='myAudio'>
                      <vg-play-pause></vg-play-pause>
                      <vg-playback-button></vg-playback-button> 
              
                      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>

                      <vg-scrub-bar>
                          <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                          <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                      </vg-scrub-bar>
              
                      <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
                      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
              
                      <vg-mute></vg-mute>
              
                      <vg-fullscreen></vg-fullscreen>
                  </vg-controls>

                <audio #audio class="audio"  [vgMedia]="audio"  id='myAudio' type='audio/mp3' autoplay=false  preload="auto">
                    <source [src]="url">
                </audio>
              </vg-player>
             </ng-container>
          </div>
          <!-- 图片 -->
					<div *ngIf="publictypeFlag.includes('image')">
              <ng-container *ngIf='!typeFlag'>
                  <nz-spin nzSimple style='margin-top:10px'></nz-spin>
              </ng-container>
              <ng-container *ngIf='typeFlag'>
                  <div>
                      <img [src]="url" alt="" style="display: block;width:100%;height:100%;">
                  </div>
              </ng-container>
					</div>


	
			</ng-template>

			<ng-template #modalFooter>
					<button nz-button nzType="primary" (click)="handleCancel()">关闭</button>
			</ng-template>
	</nz-modal>
</div>
<eui-messager [showHeader]="false" borderType="none">
  <ng-template euiBodyTemplate let-messager>
      <div class="m-content">
          <div class='m-header'>
            <span class='m-title'>{{messager.title}}</span>
            <span class='m-close' (click)="messager.closeDialog(button)"><a></a></span>
          </div>
          <div class='m-inner'>
            <span class='m-icon {{messager.icon}}' ></span>
            <span class='m-msg'>
              {{messager.msg}}
            </span>
          </div>
          <div class="m-buttons">
              <eui-linkbutton *ngFor="let button of messager.buttons;let i=index" 
                      [text]="messager.btnText[i]" 
                      [btnCls]="'b'+ i"
                      (click)="messager.closeDialog(button)">
              </eui-linkbutton>
          </div>
      </div>
  </ng-template>
</eui-messager>

<app-docdesk [isExpand]='isExpand' (expandAnimationFlag)='cardToggle($event)'  [bizfile]="bizfile" ></app-docdesk>
<ng-template #icon> 
  <i nz-icon nzType="caret-down" nzTheme="outline"></i>
</ng-template>    
